<script>
import { WindPower, Location, Menu, Document, Setting, HelpFilled, Avatar, Tools, UserFilled } from '@element-plus/icons-vue';

export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'MORDENSKY'
    }
  },
  data() {
    return {
      WindPower,
      Location,
      Menu,
      Document,
      Setting,
      HelpFilled,
      Avatar,
      activeIndex: '1', // 当前活动菜单索引
      manuallyClosedMenus: [], // 用户手动关闭的菜单记录
      role: sessionStorage.getItem('role') || ''  // 用户角色
    }
  },
  created() {
    // 初始化时设置当前活动菜单
    this.setActiveIndex();
  },
  mounted() {
    // 监听路由变化，更新菜单
    this.$router.afterEach(() => {
      this.setActiveIndex();
    });
  },
  computed: {
    // 动态计算应当打开的菜单
    openedMenus() {
      // 判断当前路由是否需要打开某个子菜单
      const path = this.$route.path;
      const neededOpenMenus = [];
      
      // 子菜单项路由对应的父菜单
      if (path.includes('/index/VenueManagement')) {
        neededOpenMenus.push('3');
      }
      
      if (path.includes('/index/AgentManagement') || path.includes('index/AgentPersonal')) {
        neededOpenMenus.push('4');
      }

      // 艺人管理相关页面应该打开对应的子菜单
      if (path.includes('/index/artistManagement') || path.includes('/index/artistPersonal') || path.includes('/index/AgentArtistPersonal')) {
        neededOpenMenus.push('2');
      }
      
      // 返回需要打开的菜单，但排除用户手动关闭的菜单
      return neededOpenMenus.filter(menu => !this.manuallyClosedMenus.includes(menu));
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // 用户手动打开菜单时，从关闭记录中移除
      const index = this.manuallyClosedMenus.indexOf(key);
      if (index !== -1) {
        this.manuallyClosedMenus.splice(index, 1);
      }
      this.$emit('open', key, keyPath);
    },
    handleClose(key, keyPath) {
      // 记录用户手动关闭的菜单
      if (!this.manuallyClosedMenus.includes(key)) {
        this.manuallyClosedMenus.push(key);
      }
      this.$emit('close', key, keyPath);
    },
    // 根据当前路由路径设置活动菜单
    setActiveIndex() {
      const path = this.$route.path;
      
      if (path.includes('/index/dashboard')) {
        this.activeIndex = '1';
      } else if (path.includes('/index/artistManagement')) {
        this.activeIndex = '2-1'; // 修改索引为2-1
      } else if (path.includes('/index/test')) {
        this.activeIndex = '3-1'; // 修改索引为3-1
      } else if (path.includes('/index/artistPersonal')) {
        this.activeIndex = '2-2'; // 修改索引为2-2
      } else if (path.includes('/index/AgentArtistPersonal')) {
        this.activeIndex = '2-3';
      } else if (path.includes('/index/SystemManagement')) {
        this.activeIndex = '5';
      } else if (path.includes('/index/VenueManagement/VenueInformationOverview')) {
            this.activeIndex = '3-1';
      } else if (path.includes('/index/VenueManagement/VenueRepairReportOverview')) {
          this.activeIndex = '3-3';
      } else if (path.includes('/index/VenueManagement/VenueRepairReport')) {
          this.activeIndex = '3-2';
      } else if (path.includes('/index/VenueManagement/VenueReservationOverview')) {
          this.activeIndex = '3-5';
      } else if (path.includes('/index/VenueManagement/VenueReservation')) {
          this.activeIndex = '3-4';
      } else if (path.includes('/index/AgentManagement')) {
        this.activeIndex = '4-1';
      } else if (path.includes('/index/AgentPersonal')) {
        this.activeIndex = '4-2';
      }
      else {
        // 默认为仪表盘
        this.activeIndex = '1';
      }
    }
  }
}
</script>

<template>
  <el-aside>
    <!-- 标题 -->
    <div :class="['title-container', isCollapse ? 'title-collapsed' : '']">
      <div class="title-content">
        <div class="title-icon-container">
          <el-icon size="30"><WindPower /></el-icon>
        </div>
        <span 
          class="title-text"
          :class="{ 'text-hidden': isCollapse }"
        >{{ title }}</span>
      </div>
    </div>
    <!-- 菜单 -->
    <el-menu
      :default-active="activeIndex"
      :default-openeds="openedMenus"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#112d4e"
      text-color="#F5F5F5"
      active-text-color="#F5F5F5"
      :border="false"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <router-link to="/index/dashboard" style="text-decoration: none; color: white;" v-if="role === '公司运营'">
        <el-menu-item index="1">
          <el-icon><HelpFilled /></el-icon>
          <template #title>仪表盘</template>
        </el-menu-item>
      </router-link>
        
     
      <el-sub-menu index="2" v-if="role === '公司运营' || role === '经纪人' || role === '艺人'">
        <template #title>
          <el-icon><Avatar /></el-icon>
          <span>艺人管理</span>
        </template>
          <el-menu-item-group title="">
            <router-link to="/index/artistManagement"><el-menu-item index="2-1" v-if="role === '公司运营' || role === '经纪人'">艺人总览</el-menu-item></router-link>
            <router-link to="/index/artistPersonal"><el-menu-item index="2-2" v-if="role === '艺人'">艺人个人界面</el-menu-item></router-link>
            <router-link to="/index/AgentArtistPersonal"><el-menu-item index="2-3" v-if="role === '经纪人'">艺人管理界面</el-menu-item></router-link>
          </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="3" v-if="role === '场地管理员' || role === '经纪人'">
        <template #title>
          <el-icon><LocationFilled /></el-icon>
          <span>场地管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/index/VenueManagement/VenueInformationOverview" v-if="role === '场地管理员' || role === '经纪人'"><el-menu-item index="3-1">场地总览</el-menu-item></router-link>
          <router-link to="/index/VenueManagement/VenueRepairReport"><el-menu-item index="3-2" v-if="role === '经纪人'">场地报修</el-menu-item></router-link>
          <router-link to="/index/VenueManagement/VenueRepairReportOverview"><el-menu-item index="3-3" v-if="role === '场地管理员'">场地报修信息总览</el-menu-item></router-link>
          <router-link to="/index/VenueManagement/VenueReservation"><el-menu-item index="3-4" v-if="role === '经纪人'">场地预约</el-menu-item></router-link>
          <router-link to="/index/VenueManagement/VenueReservationOverview"><el-menu-item index="3-5" v-if="role === '场地管理员'">场地预约信息总览</el-menu-item></router-link>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="4" v-if="role === '经纪人管理员' || role === '经纪人'">
        <template #title>
          <el-icon><UserFilled /></el-icon>
          <span>经纪人管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/index/AgentManagement"><el-menu-item index="4-1"  v-if="role === '经纪人管理员'">经纪人管理页面</el-menu-item></router-link>
          <router-link to="/index/AgentPersonal"><el-menu-item index="4-2"  v-if="role === '经纪人'">经纪人个人页面</el-menu-item></router-link>
        </el-menu-item-group>
      </el-sub-menu>


      <router-link to="/index/SystemManagement" style="text-decoration: none; color: white;" v-if="role === '系统管理员'">
        <el-menu-item index="5">
          <el-icon><Tools /></el-icon>
          <template #title>系统管理界面</template>
        </el-menu-item>
      </router-link>
    </el-menu>
  </el-aside>
</template>

<style scoped>
  a{
    text-decoration: none
    }

  .el-aside {
    height: 100vh;
    width: auto;
    background-color: #112d4e;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  /* 移除菜单右侧白条 */
  :deep(.el-menu) {
    border-right: none !important;
  }

  /* 选中菜单项的样式 */
  :deep(.el-menu-item.is-active) {
    background-color: #3f72af !important;
    color: #F5F5F5 !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }

  /* 选中子菜单项的样式 */
  :deep(.el-menu-item-group .el-menu-item.is-active) {
    background-color: #3f72af !important;
    color: #F5F5F5 !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }

  /* 标题容器样式 */
  .title-container {
    height: 80px;
    line-height: 80px;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre-wrap;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.5s cubic-bezier(0.34, 0.69, 0.1, 1);
    overflow: hidden;
    width: 200px;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    margin: 5px 0;
  }

  .title-collapsed {
    width: 64px;
    justify-content: center;
  }

  .title-text {
    vertical-align: middle;
    margin-left: 8px;
    transition: all 0.5s cubic-bezier(0.34, 0.69, 0.1, 1);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    opacity: 1;
    font-size: 18px;
  }

  .text-hidden {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
  }

  .title-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.34, 0.69, 0.1, 1);
    vertical-align: middle;
    width: 32px;
    height: 32px;
    position: relative;
    flex-shrink: 0;
    transform-origin: center;
  }
  
  .title-collapsed .title-icon-container {
    transform: scale(1.2);
  }

  .title-container:not(.title-collapsed) .title-icon-container {
    margin-right: 0;
  }

  .title-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .title-collapsed .title-content {
    justify-content: center;
    transform: translateX(0);
  }

  .title-container:not(.title-collapsed) .title-content {
    justify-content: flex-start;
    padding-left: 20px;
  }
  
  /* 调整菜单内容间距 */
  :deep(.el-menu-item) {
    height: 50px;
    line-height: 50px;
    margin: 5px 0;
  }
  
  /* 调整子菜单项间距 */
  :deep(.el-menu-item-group .el-menu-item) {
    padding-left: 45px !important;
  }
  
  /* 调整子菜单标题间距 */
  :deep(.el-sub-menu__title) {
    height: 50px;
    line-height: 50px;
    margin: 5px 0;
  }
  
  /* 隐藏menu-item-group的标题空间 */
  :deep(.el-menu-item-group__title) {
    padding: 0;
    height: 0;
  }
</style>
